<script lang="ts" setup>
import { ElDatePicker, ElButton, ElRow, ElCol, ElMessage } from "element-plus";
import flightTime from "./flightTime.vue";
import flightTable from "./flightTable.vue";
import { ref, reactive, onMounted } from "vue";
import { getStatisticsData } from "#/api/sys/dataStatistics";
import dayjs from "dayjs";
import { dateShortcuts } from "#/utils/dateShortcuts";
import { useDebounceFn } from "@vueuse/core";

const time = ref([new Date() - 3600 * 1000 * 24 * 7, new Date()]);
const firstData = reactive({
  list: [],
  name: "1",
});
const secondData = reactive({
  list: [],
  name: "2",
});
const thirdData = reactive({
  list: [],
  name: "3",
});

const record = reactive({
  totalFlyTime: "",
  totalFlyDistance: "",
  avgSingleTaskTime: "",
  avgSingleTaskDistance: "",
  totalTasks: "",
  airportDroneNums: "",
  flyDetailStatistics: {},
});

const search = async () => {
  const params = {
    startTime: dayjs(time.value[0]).format("YYYY-MM-DD HH:mm:ss")
      ? dayjs(time.value[0]).format("YYYY-MM-DD HH:mm:ss")
      : "",
    endTime: dayjs(time.value[1]).format("YYYY-MM-DD HH:mm:ss")
      ? dayjs(time.value[1]).format("YYYY-MM-DD HH:mm:ss")
      : "",
  };
  const { data } = await getStatisticsData(params);
  record.totalFlyTime = data.totalFlyTime;
  record.totalFlyDistance = data.totalFlyDistance;
  record.avgSingleTaskTime = data.avgSingleTaskTime;
  record.avgSingleTaskDistance = data.avgSingleTaskDistance;
  record.totalTasks = data.totalTasks;
  record.airportDroneNums = data.airportDroneNums;
  record.flyDetailStatistics = data.flyDetailStatistics;
  // 展示数据
  data.getStatisticsDataResponseByFlyDistance = [
    { sort: 1, airportName: "机场1", flyDistance: 100, percentage: 80 },
    { sort: 2, airportName: "机场2", flyDistance: 80, percentage: 70 },
    { sort: 3, airportName: "机场3", flyDistance: 60, percentage: 60 },
    { sort: 4, airportName: "机场4", flyDistance: 40, percentage: 50 },
    { sort: 5, airportName: "机场5", flyDistance: 20, percentage: 40 },
  ];
  firstData.list = data.getStatisticsDataResponseByFlyDistance;
  secondData.list = data.getStatisticsDataResponseByFlyTimes;
  thirdData.list = data.getStatisticsDataResponseByFlyCount;
};
const debouncedSearch = useDebounceFn(search, 500);
const resetForm = () => {
  // 设置默认时间为最近一周
  const end = new Date();
  const start = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  time.value = [
    dayjs(start).format("YYYY-MM-DD HH:mm:ss"),
    dayjs(end).format("YYYY-MM-DD HH:mm:ss"),
  ];
  search();
};

onMounted(() => {
  // 设置默认时间为最近一周
  const end = new Date();
  const start = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  time.value = [
    dayjs(start).format("YYYY-MM-DD HH:mm:ss"),
    dayjs(end).format("YYYY-MM-DD HH:mm:ss"),
  ];
  search();
});
</script>
<template>
  <div>
    <div class="search">
      <ElRow>
        <ElCol :xs="24" :sm="24" :md="12" :lg="8" :xl="6" class="searchCol">
          <div class="searchForm">
            <span class="searchLabel">选择日期：</span>
            <div>
              <ElDatePicker
                v-model="time"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :shortcuts="dateShortcuts"
                value-format="YYYY-MM-DD HH:mm:ss"
                @change="search()"
              />
            </div>
            <div class="actionButtons">
              <ElButton type="primary" @click="debouncedSearch">查询</ElButton>
              <ElButton @click="resetForm">重置</ElButton>
            </div>
          </div>
        </ElCol>
      </ElRow>
    </div>
    <div class="content">
      <h1>飞行汇总</h1>
      <div class="flightSummaryContent">
        <div class="item blue">
          <img src="/static/dataStatistics/1.png" alt="" class="rightImg" />
          <h5>飞行总时长</h5>
          <p class="green">
            {{ record.totalFlyTime }}
            <span>h</span>
          </p>
        </div>
        <div class="item purple">
          <img src="/static/dataStatistics/2.png" alt="" class="rightImg" />
          <h5>飞行总距离</h5>
          <p class="green">
            {{ record.totalFlyDistance }}
            <span>km</span>
          </p>
        </div>
        <div class="item wathet">
          <img src="/static/dataStatistics/3.png" alt="" class="rightImg" />
          <h5>单次任务平均时长</h5>
          <p class="green">
            {{ record.avgSingleTaskTime }}
            <span>h</span>
          </p>
        </div>
        <div class="item purple">
          <img src="/static/dataStatistics/4.png" alt="" class="rightImg" />
          <h5>单次任务平均距离</h5>
          <p class="green">
            {{ record.avgSingleTaskDistance }}
            <span>km</span>
          </p>
        </div>
        <div class="item pink">
          <img src="/static/dataStatistics/5.png" alt="" class="rightImg" />
          <h5>飞行总任务数</h5>
          <p class="green">{{ record.totalTasks }}</p>
        </div>
        <div class="item purple">
          <img src="/static/dataStatistics/6.png" alt="" class="rightImg" />
          <h5>机场飞行架次</h5>
          <p class="green">{{ record.airportDroneNums }}</p>
        </div>
      </div>
    </div>
    <div class="flex-wrap">
      <div class="flex">
        <div class="w-full lg:w-1/2">
          <div class="flightDistance">
            <h1 style="margin-bottom: 50px">
              <img
                src="/static/dataStatistics/p1.png"
                alt=""
                class="titleImg"
              />
              飞行距离/时长统计
              <div class="right">
                <div class="rightFlex">
                  <span class="color"></span>
                  <span>飞行距离</span>
                </div>
                <div class="rightFlex" style="margin-left: 16px">
                  <span class="color yellow"></span>
                  <span>飞行时长</span>
                </div>
              </div>
            </h1>
            <flightTime :data="record.flyDetailStatistics" />
          </div>
        </div>
        <div class="w-full lg:w-1/2">
          <div class="flightDistance">
            <h1>
              <img
                src="/static/dataStatistics/p2.png"
                alt=""
                class="titleImg"
              />飞行距离排名
            </h1>
            <flightTable :data="firstData" />
          </div>
        </div>
      </div>
      <div class="flex">
        <div class="w-full lg:w-1/2">
          <div class="flightDistance">
            <h1>
              <img
                src="/static/dataStatistics/p3.png"
                alt=""
                class="titleImg"
              />飞行时长排名
            </h1>
            <flightTable :data="secondData" />
          </div>
        </div>
        <div class="w-full lg:w-1/2">
          <div class="flightDistance">
            <h1>
              <img
                src="/static/dataStatistics/p4.png"
                alt=""
                class="titleImg"
              />飞行架次排名
            </h1>
            <flightTable :data="thirdData" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
/* 响应式调整 */
@media (max-width: 768px) {
  .searchForm {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start;
  }

  .flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .w-full {
    margin-bottom: 8px;
  }
}

.search {
  width: 100%;
  padding: 12px 0 12px 24px;
  margin-top: 8px;
  background: #fff;
}

.el-row {
  display: block;
}

.content {
  margin: 16px;
  background: #fff;
  padding: 12px 16px 16px 16px;
  border-radius: 4px;
}

h1 {
  margin-bottom: 12px;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  color: #303133;
  text-align: left;
}

.flightSummary {
  height: 410px;
}

.flightSummaryContent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 24px;
}

.item {
  position: relative;
  width: 252px;
  height: 100px;
  margin-right: 12px;
  margin-bottom: 12px;
  background: #fff;
  border-radius: 4px;
}

.wathet {
  background: #edf8fd;
}

.blue {
  background: #ebf5ff;
}

.purple {
  background: #eaf0fc;
}

.pink {
  background: #fff4ed;
}

.rightImg {
  /* height: 50px; */
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
}

h5 {
  margin-top: 16px;
  margin-left: 16px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  color: #606266;
  text-align: left;
}

p {
  margin-top: 24px;
  font-size: 28px;
  font-style: normal;
  font-weight: 900;
  color: #303133;
  text-align: left;
  text-indent: 16px;
}

p span {
  font-size: 16px;
  color: #909399;
}

.w-full {
  margin-right: 16px;
  margin-bottom: 16px;
  background: #fff;
  border-radius: 4px;
}

.w-full:last-child {
  margin-right: 0;
}

.searchForm {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
}

.flightDistance {
  padding: 16px;
  margin-bottom: 8px;
}

.flex {
  height: 412px;
}

.searchLabel {
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
}

/* .date-picker {
  width: 100%;
} */

.actionButtons {
  display: flex;
  gap: 10px;
}

.flex-wrap {
  margin: 0 16px 0px 16px;
}

.titleImg {
  width: 14px;
  height: auto;
  margin-right: 8px;
  display: inline-block;
}

.right {
  float: right;
  right: 46px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #606266;
}

.color {
  width: 24px;
  height: 16px;
  background: #2f69eb;
  border-radius: 1px;
  display: inline-block;
  margin-right: 4px;
}

.yellow {
  background: #f7b817;
}

.rightFlex {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
